<template>
<view>
	<view class="cont"></view>
		<view class="margin bg-fff" >
			<!-- 头像 -->
			<view class="text-center">
				<image class="avatar" src="../../static/mcake-logo.png"></image>
			</view>
			<!-- 昵称 -->
			<view class="fs-28 text-center">
				左文韬
			</view>
			<view class="flex grid" >
				<view v-for="(item,index) in gridArr" class="flex flex-direction align-center margin">
					 <text :class="['iconfont margin-bottom-xs', item.icon]" ></text>
					 {{item.name}}
				</view>
				<view v-for="(item,index) in gridArr" class="flex flex-direction align-center margin">
					 <text :class="['iconfont margin-bottom-xs', item.icon]" ></text>
					 {{item.name}}
				</view>
			</view>
		</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				gridArr:[
					{
						icon:'icon-danju',
						name:'我的订单'
					},
					{
						icon:'icon-jifen',
						name:'待收货'
					},
					{
						icon:'icon-ziliaoshouce',
						name:'待付款'
					},
					{
						icon:'icon-vip-fill',
						name:'会员等级'
					}
				]
			};
		}
	}
</script>

<style lang="scss">
.cont{
	background-color: #f6f6f6;
	height: 300upx;
	
}
.grid .iconfont{
	font-size: 50upx;
	color: #888;
}
.avatar{
	height: 150upx;
	width: 150upx;
	border-radius: 50%;
	margin-top: -85upx;
}
.margin .bg-fff{
	margin-top: 200upx;
}
</style>
